<script setup>
  import {
    ref,
    reactive,
    nextTick,
    watch
  } from 'vue'
  // import type {
  //   FormProps
  // } from 'element-plus'
  const props = defineProps({
    forNum: {
      type: Number
    },
    tabtype: {
      type: Number
    }
  })
  const state = reactive({
    companies: [],
    forNum: 'companies'
  });
  const formLabelWidth = ref(150)
  const value1 = ref([
    new Date(2016, 9, 10, 8, 40),
    new Date(2016, 9, 10, 9, 40),
  ])


  watch(() => props.forNum, (newValue, oldValue) => {
    // 这里处理isRead变化后的逻辑
    console.log(`isRead变化了，新值为：${newValue}, 旧值为：${oldValue}`);
  });
  const formLabelAlign = reactive({
    name: '',
    region: ''
  })
</script>
<template>

  <div class="addContent" v-for="(item,index) in forNum">
    <el-form label-position="right" label-width="auto" :model="formLabelAlign" :label-width="formLabelWidth">
      <!-- <div class="close" @click="reduceClick"><img src="/src/assets/close.png" alt=""></div> -->
      <slot name="reduce"></slot>
      <el-form-item label="排班时间" class="timePicker">
        <el-time-picker v-model="value1" is-range range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
      </el-form-item>
      <el-form-item label="总号源数">
      </el-form-item>
      <el-form-item class="lastInput">
        <div class="input">
          <div>外部号源数</div>
          <el-input-number v-model="formLabelAlign.name" :min="0" :max="999" controls-position="right" />
        </div>
        <div class="input">
          <div>内部初诊号源数</div>
          <el-input-number v-model="formLabelAlign.name" :min="0" :max="999" controls-position="right" />
        </div>
        <div class="input">
          <div>内部复诊号源数</div>
          <el-input-number v-model="formLabelAlign.name" :min="0" :max="999" controls-position="right" />
        </div>
        <div class="input">
          <div>第三方号源数</div>
          <el-input-number v-model="formLabelAlign.name" :min="0" :max="999" controls-position="right" />
        </div>
      </el-form-item>
    </el-form>
  </div>
  <slot name="add"></slot>
</template>



<style lang="scss" scoped>
  .addContent {
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    padding: 10px 24px 10px 24px;
    margin-bottom: 20px;

    .timePicker {
      width: 400px;
    }

    .lastInput {

      padding: 15px 20px;
      background: #f9f9f9;
      border-radius: 4px;
      width: 100%;

      .input {
        width: 22%;
      }
    }

  }

  .lastInput ::v-deep .el-form-item__content {
    display: flex;
    justify-content: space-around;
  }
</style>